<!-- 个人中心 -->
<template>
  <div class="personal-container">
    <div class="back"></div>
    <div class="main">
      <div class="nav">
        <Nav></Nav>
      </div>
      <div class="avatar">
        <Avatar :url="readUserInfo.avatar" :size="100"></Avatar>
        <p>{{ readUserInfo.Nickname }}</p>
        <div class="setout">SetOut</div>
      </div>
      <div class="info">
        <div class="content">
          <div class="item">
            <Icon type="StudentID"></Icon>
            <p>学号: {{ readUserInfo.studentId }}</p>
          </div>
          <div class="item">
            <Icon type="telephone"></Icon>
            <p>电话: {{ readUserInfo.phone }}</p>
          </div>
          <div class="item">
            <Icon type="address"></Icon>
            <p>
              住址: {{ readUserInfo.dormitoryName }}/{{
                readUserInfo.floorNumber
              }}/{{ readUserInfo.roomNo }}/{{ readUserInfo.bednumber }}
            </p>
          </div>
          <div class="item">
            <Icon type="time"></Icon>
            <p>
              入住时间:
              {{ moment(readUserInfo.checkInTime).format("YYYY-MM-DD") }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Avatar from "@/components/Avatar/index.vue";
import Icon from "@/components/Icon/index.vue";
import Nav from "./components/Nav.vue";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import moment from "moment";
const { readUserInfo } = storeToRefs(useUserStore());
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.personal-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  min-height: 600px;
  .back {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, @frameColor1 69%, @frameColor2 69%);
  }
  .main {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .avatar {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, 0%);
    text-align: center;
    font-size: 1.2em;
    .avatar-container {
      margin: 0 auto;
    }
    p {
      margin: 0 auto;
      color: #fffeff;
      text-align-last: justify;
      text-align: justify;
      text-justify: distribute;
      margin-top: 20px;
      width: 100px;
    }
    .setout {
      font-size: 1.5em;
      border: 2px solid #454067;
      color: #454067;
      width: 160px;
      height: 50px;
      line-height: 50px;
      border-radius: 50px;
      margin-top: 30px;
    }
  }
  .info {
    width: 100%;
    height: 160px;
    position: absolute;
    left: 0;
    bottom: 140px;
    .title {
      text-align: center;
      font-size: 1.2em;
      color: #484653;
    }
    .content {
      display: flex;
      justify-content: center;
      .item {
        margin: 60px auto;

        .icon-container {
          margin: 0 auto;
          width: 2em;
          height: 2em;
          line-height: 2em;
          font-size: 2em;
          text-align: center;
          display: block;
          border: 3px solid @gray;
          border-radius: 10px;
        }
        p {
          margin-top: 10px;
          font-size: 1.3em;
          color: @gray;
        }
      }
    }
  }
}
</style>